<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>

    <script>
var radius=40
var lastPoints
function XY(x,y){
  this.x=x;
  this.y=y;
}
function funNewPoint(points){
  for(var j=0;j<30;j++){
    var p = new XY(radius + Math.random()*(700-radius-radius), 
		radius + Math.random()*(500-radius-radius))
    var ok=true
    for( i in points ){
      dist = Math.sqrt( (points[i].x-p.x)*(points[i].x-p.x) + (points[i].y-p.y)*(points[i].y-p.y) )
      if( dist<radius*2.5 ){
        ok=false
      }
    }
    if( ok ){
      return p;
    }
  }
}
function funPoints(count){
  var a = new Array()
  for( i=0; i<count; i++ ){
	a[i] = funNewPoint(a)
  }
  return a
}
function funShowLastPoints(){
      funShowPoints(lastPoints)
}
function funStart(){
      lastPoints = funPoints( Math.max(1,Math.random()*document.getElementById('maxCount').value) )
      funShowPoints(lastPoints)
      window.setTimeout(funClear, document.getElementById('millis').value);
}
function funShowPoints(points){
      funClear()
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      for(i in points){
		  var centerX = points[i].x
		  var centerY = points[i].y

		  context.beginPath();
		  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
		  context.fillStyle = 'green';
		  context.fill();
      }
/*
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();
*/
}

function funClear(){
      var canvas = document.getElementById('myCanvas');
       canvas.width = canvas.width;
}
    </script>

  </head>
  <body>
    <h3>COUNT THE POINTS</h3>
    Millis <input id=millis value=400 size=5>
    Max count <input id=maxCount value=7 size=5>
    <button onclick='funStart()'>START</button>
    <button onclick='funShowLastPoints()'>LAST</button>
    <br/>
    <canvas id="myCanvas" width="700" height="500"></canvas>
  </body>
</html>

